<!-- 账号密码登录页 -->
<template>
	<view class="uni-content">
		<view class="login-logo">
			<image :src="logo"></image>
		</view>
		<!-- 顶部文字 -->
		<text class="title title-box">账号密码登录</text>
		<uni-forms>
			<uni-forms-item name="username">
				<uni-easyinput
					:focus="focusUsername"
					@blur="focusUsername = false"
					class="input-box"
					:inputBorder="false"
					v-model="username"
					placeholder="请输入手机号/用户名/邮箱"
				/>
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput
					:focus="focusPassword"
					@blur="focusPassword = false"
					class="input-box"
					clearable
					type="password"
					:inputBorder="false"
					v-model="password"
					placeholder="请输入密码"
				/>
			</uni-forms-item>
		</uni-forms>
		<uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
		<!-- 带选择框的隐私政策协议组件 -->
		<uni-id-pages-agreements scope="login" ref="agreements"></uni-id-pages-agreements>
		<button class="uni-btn" type="primary" @click="pwdLogin">登录</button>
		<!-- 忘记密码 -->
		<view class="link-box">
			<view v-if="!config.isAdmin">
				<text class="forget">忘记了？</text>
				<text class="link" @click="toRetrievePwd">找回密码</text>
			</view>
			<text v-if="!existAdmin" class="link" @click="toRegister">
				{{ config.isAdmin ? "注册管理员账号" : "注册账号" }}
			</text>
		</view>
		<!-- 悬浮登录方式组件 -->
		<!-- #ifndef MP-TOUTIAO -->
		<uni-id-pages-fab-login ref="uniFabLogin"></uni-id-pages-fab-login>
		<!-- #endif -->
	</view>
</template>

<script>
import mixin from "@/uni_modules/uni-id-pages/common/login-page.mixin.js";
const uniIdCo = uniCloud.importObject("uni-id-co", {
	errorOptions: {
		type: "toast"
	}
});
export default {
	mixins: [mixin],
	data() {
		return {
			password: "",
			username: "",
			captcha: "",
			needCaptcha: false,
			focusUsername: false,
			focusPassword: false,
			logo: "/static/logo.png",
			existAdmin: true
		};
	},
	onShow() {
		// #ifdef H5
		document.onkeydown = (event) => {
			let e = event || window.event;
			if (e && e.keyCode == 13) {
				//回车键的键值为13
				this.pwdLogin();
			}
		};
		// #endif
	},
	async onLoad() {
		// 查询是否已经有管理员注册了，如果有，则隐藏注册管理员的入口
		try {
			const db = uniCloud.database();
			let countRes = await db.collection("uni-id-users").where({ role: "admin" }).count();
			let count = countRes.result.total;
			this.existAdmin = count > 0 ? true : false;
		} catch (err) {
			this.existAdmin = false;
		}
	},
	methods: {
		// 页面跳转，找回密码
		toRetrievePwd() {
			let url = "/uni_modules/uni-id-pages/pages/retrieve/retrieve";
			//如果刚好用户名输入框的值为手机号码，就把它传到retrieve页面，根据该手机号找回密码
			if (/^1\d{10}$/.test(this.username)) {
				url += `?phoneNumber=${this.username}`;
			}
			uni.navigateTo({
				url
			});
		},
		/**
		 * 密码登录
		 */
		pwdLogin() {
			if (!this.password.length) {
				this.focusPassword = true;
				return uni.showToast({
					title: "请输入密码",
					icon: "none",
					duration: 3000
				});
			}
			if (!this.username.length) {
				this.focusUsername = true;
				return uni.showToast({
					title: "请输入手机号/用户名/邮箱",
					icon: "none",
					duration: 3000
				});
			}
			if (this.needCaptcha && this.captcha.length != 4) {
				this.$refs.captcha.getImageCaptcha();
				return uni.showToast({
					title: "请输入验证码",
					icon: "none",
					duration: 3000
				});
			}

			if (this.needAgreements && !this.agree) {
				return this.$refs.agreements.popup(this.pwdLogin);
			}

			let data = {
				password: this.password,
				captcha: this.captcha
			};

			if (/^1\d{10}$/.test(this.username)) {
				data.mobile = this.username;
			} else if (/@/.test(this.username)) {
				data.email = this.username;
			} else {
				data.username = this.username;
			}

			uniIdCo
				.login(data)
				.then((e) => {
					this.loginSuccess(e);
				})
				.catch((e) => {
					if (e.errCode == "uni-id-captcha-required") {
						this.needCaptcha = true;
					} else if (this.needCaptcha) {
						//登录失败，自动重新获取验证码
						this.$refs.captcha.getImageCaptcha();
					}
				});
		},
		/* 前往注册 */
		toRegister() {
			uni.navigateTo({
				url: this.config.isAdmin
					? "/uni_modules/uni-id-pages/pages/register/register-admin"
					: "/uni_modules/uni-id-pages/pages/register/register",
				fail(e) {
					console.error(e);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import "@/uni_modules/uni-id-pages/common/login-page.scss";

@media screen and (min-width: 690px) {
	.uni-content {
		height: auto;
	}
}

.forget {
	font-size: 12px;
	color: #8a8f8b;
}

.link-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	margin-top: 20px;
}

.link {
	font-size: 12px;
}
</style>
